<template>
	<view class="v-content" :style="[contentStyle]">
		<view class="main" :style="[
			{
				height: single ? '100%' : '',
			},
			mainStyle,
		]">
			<slot></slot>

		</view>

		<v-modal ref="app-modal">
			<div class="app-modal">
				<v-parse :content="modal.content"></v-parse>
			</div>
		</v-modal>
		<u-toast ref="app-toast" position="top" :z-index="999999" />

		<image class="bg" v-if="backgroundIsImage" :mode="backgroundMode" :src="effectiveBackground"></image>
	</view>
</template>

<script>
import Mixins from "@/mixins"
import ModalMixins from "./mixins/modal"
import ToastMixins from "./mixins/toast"
import {
	systemInfo
} from "@/config"

export default {
	name: "v-content",
	mixins: [Mixins, ModalMixins, ToastMixins],
	props: {
		full: { type: Boolean, default: true },
		single: { type: Boolean, default: false },
		flex: { type: Boolean, default: false },
		bg: { type: [String], default: '#fff' },
		backgroundMode: { type: String, default: 'aspectFill' },
		defaultBackground: { type: String, default: '#fff' },
		paddingTop: { type: [Number, String], default: 0 },
		paddingBottom: { type: [Number, String], default: 0 },
		// 添加全局背景图片开关属性
		useGlobalBackground: { type: Boolean, default: true },
		// 添加底部安全区域适配属性
		safeAreaBottom: { type: Boolean, default: true },
	},
	data() {
		return {
			safeAreaInsets: {
				bottom: 0
			}
		}
	},
	created() {
		// 获取安全区域信息
		// #ifndef H5
		try {
			const systemInfo = uni.getSystemInfoSync();
			if (systemInfo.safeAreaInsets) {
				this.safeAreaInsets = systemInfo.safeAreaInsets;
			}
		} catch (e) {
			console.error('获取安全区域信息失败', e);
		}
		// #endif
	},
	computed: {
		// 添加计算属性来确定最终使用的背景
		effectiveBackground() {
			if (this.useGlobalBackground) {
				return '/static/image/bg.png';
			}
			return this.bg;
		},
		screenHeight() { return systemInfo?.windowHeight },
		contentStyle() {
			return {
				minHeight: this.full ? this.screenHeight + 'px' : '',
				height: this.single ? this.screenHeight + 'px' : '',
				overflow: this.single ? 'hidden' : '',
				bg: this.backgroundIsImage ? this.effectiveBackground : this.effectiveBackground,
			}
		},
		mainStyle() {
			let paddingTop = this.paddingTop
			if (!isNaN(+paddingTop)) {
				paddingTop += "rpx"
			}
			let paddingBottom = this.paddingBottom
			if (!isNaN(+paddingBottom)) {
				paddingBottom += "rpx"
			}
			let flexStyle = {}
			if (this.flex) {
				flexStyle = {
					"display": "flex",
					"flex-direction": "column",
					"align-content": "stretch",
					"justify-content": "flex-start",
					"align-items": "stretch",
				}
			}

			return {
				paddingTop,
				paddingBottom,
				...flexStyle,
			}
		},
		backgroundIsImage() {
			if (/^http|^\/|^\@|^\./.test(this.effectiveBackground)) {
				return true
			}
			return false
		}
	},
	mounted() { },
}
</script>

<style lang="scss" scoped>
.v-content {
	position: relative;
	overflow: hidden;

	.main {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
	}

	.bg {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		max-height: 100vh;
	}
}

.app-modal {
	text-align: center;
}
</style>